// 2、标签样式的设置
import './Two.css'

export default function Two() {
    // 定义一个对象，用于表述标签样式
    let styleObj = {
        color: 'green',
        fontSize: '20px',
        fontWeight: 'bold',
    }
    let isConfirm = false;

    let asyHi = function(){
        alert('你好！我是函数式组件')
        // axios.....
    }

    return (
        <div className='two'>
            <h2>Two:函数组件</h2>
            <div style={{color: 'red'}}>行间对象定义样式</div>
            <div style={styleObj}>定义一个对象,设置样式</div>
            {/* className属性设置标签css样式 */}
            <div className='title'>className属性指定css样式</div>
            {/* 通过表达式控制是否添加标签样式 */}
            <div className={isConfirm ? 'title' : ''}>通过表达式控制是否添加标签样式</div>
            <button onClick={
                asyHi
            }>函数式组件按钮</button>

        </div>
    )
}
